<template>
	<view class="content page-wrapper">
		<view class="gradient-bg page-body">
			<view class="s-input-wrap">
				<view class="s-input-box flex-row-between" style="display: flex; align-items: center;">
					<text class="black-text">托盘号</text>
					<input auto-focus="true" v-model="trayNo" @confirm="searchTrayInfo" class="s-input flex1" placeholder="请输入或扫描托盘号" />
					<view style="width: 10rpx;"></view>
					<image v-if="trayNo" class="s-input-icon clear-icon" src="/static/images/clear.png" @click="clearTrayNo"></image>
					<image class="s-input-icon" src="/static/images/scan.png"></image>
				</view>
			</view>
			<view class="s-input-wrap">
				<view class="s-input-box flex-row-between"  style="display: flex; align-items: center;">
					<text class="black-text">物料号</text>
					<input v-model="materialNo" @confirm="searchMaterial" class="s-input flex1" placeholder="请输入或扫描物料号" />
					<view style="width: 10rpx;"></view>
					<image v-if="materialNo" class="s-input-icon clear-icon" src="/static/images/clear.png" @click="clearMaterialNo"></image>
					<image class="s-input-icon" src="/static/images/scan.png"></image>
				</view>
			</view>
			<scroll-view scroll-y style="max-height: 700rpx;" v-if="materialItems.length">
				<view v-for="(item, index) in materialItems" :key="index" class="s-input-wrap">
					<view class="s-input-box flex-row-between">
						<text class="gray-text font-30">物料编号</text>
						<text class="black-text font-30">{{item.productNo}}</text>
					</view>
					<view class="s-input-box">
						<text class="gray-text font-30">物料名称</text>
						<view class="material-name">
							<text class="black-text font-30">{{item.productName}}</text>
						</view>
					</view>
					<view class="s-input-box flex-row-between">
						<text class="gray-text font-30">需求数量</text>
						<input type="number" v-model="item.qty" style="width: 170rpx; text-align: right;" placeholder="请输入数量" />
					</view>
					<view class="s-input-box flex-row-between">
						<text class="gray-text font-30">生产日期</text>
						<picker mode="date" :value="item.productionDate" @change="(e) => bindProductDateChange(e, index)">
							<view class="black-text font-30">{{item.productionDate || '请选择生产日期'}}</view>
						</picker>
					</view>
					<view class="s-input-box flex-row-between">
						<text class="gray-text font-30">有效期</text>
						<text class="black-text font-30">{{item.expiryDate || '--'}}</text>
					</view>
				</view>
			</scroll-view>
			<view @click="addDetail" class="botton p-botton font-30" style="height: 92rpx; line-height:92rpx;margin: 0 25rpx;">
				绑 定
			</view>
		</view>
		<view class="page-footer" style="margin-top: 30rpx; padding: 20rpx;">
			<zb-table :show-header="true" fit="true" :columns="column" :border="true" :data="pickProductBillDetailList">
			</zb-table>
		</view>
	</view>
</template>

<script>
	import {
		validateTrayCode,
    addDaysToDate,
	} from "@/utils/common"
	import { defaultPageConfig } from "@/const/index"
	import {
		billDetailRecord,
		getBillProductList,
		addReceiveDetail,
	} from "./api"

	export default {
		data() {
			return {
				trayNo: '',
				materialNo: '',
				splitBillNo: '',
				column: [{
						type: 'index',
						label: '序号',
						align: 'center',
						width: 50
					},
					{
						name: 'trayNo',
						label: '托盘号',
						fixed: false,
						emptyString: '--'
					},
					{
						name: 'productNo',
						label: '物料编号',
						fixed: false,
						emptyString: '--'
					},
					{
						name: 'productName',
						label: '物料名称',
						sorter: false,
					},
					{
						name: 'qty',
						label: '数量'
					},
					{
						name: 'productionDate',
						label: '生产日期',
						emptyString: '--'
					},
					{
						name: 'expiryDate',
						label: '有效期',
						emptyString: '--'
					},

				],
				pickProductBillDetailList: [],
				materialItems: [{}],
			}
		},
		computed: {

		},
		onShow() {
			// Refresh list when returning from edit page
			if (this.trayNo) {
				this.searchTrayInfo();
			}
		},
		methods: {
			searchTrayInfo() {
				if (!this.trayNo) {
					this.$modal.msg("请输入托盘号");
					return;
				}
				if (!validateTrayCode(this.trayNo)) {
					this.$modal.msg("托盘号格式不正确");
					return;
				}
				this.getDetail(this.trayNo);
			},
			getDetail(no){
				billDetailRecord({
					...defaultPageConfig,
					trayNo: no
				}).then(res => {
					if (res.code == 200) {
						this.pickProductBillDetailList=res.rows
					}else{
						res.msg && this.$modal.confirmClose(res.msg)
					}
				})
			},
			searchMaterial() {
				if (!this.materialNo) {
					this.$modal.msg("请输入物料号");
					return;
				}
				getBillProductList({
					...defaultPageConfig,
					productNo: this.materialNo,
				}).then(res => {
					if (res.code == 200) {
						this.materialItems = res.rows.map(item => ({
							...item,
							productionDate: '',
							expiryDate: '',
							qty: ''
						}));
					}else{
						res.msg && this.$modal.confirmClose(res.msg)
					}
				})
			},
			bindProductDateChange(e, index) {
				const selectedDate = e.detail.value;
				this.materialItems[index].productionDate = selectedDate;

				if (this.materialItems[index].qualityGuaranteePeriod) {
					const prodDate = new Date(selectedDate);
					prodDate.setDate(prodDate.getDate() + this.materialItems[index].qualityGuaranteePeriod);
					this.materialItems[index].expiryDate = this.formatDate(prodDate);
          this.materialItems[index].validDateNum=this.materialItems[index].qualityGuaranteePeriod;
          this.materialItems[index].productUnit=this.materialItems[index].specUnitName;
          this.materialItems[index].batchNo=addDaysToDate(selectedDate, 0, 1);

				}
			},
			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			addDetail() {
				if (!this.trayNo) {
					this.$modal.msg("请输入托盘号");
					return;
				}

				if (this.materialItems.length === 0) {
					this.$modal.msg("请先选择物料");
					return;
				}
				const sqty = this.materialItems.some(item => !item.qty);
				if (sqty) {
					this.$modal.msg("请输入数量");
					return;
				}


				const missingDates = this.materialItems.some(item => !item.productionDate);
				if (missingDates) {
					this.$modal.msg("请为所有物料选择生产日期");
					return;
				}

				let params = {
					...this.materialItems[0],
					trayNo: this.trayNo,
					materialNo: this.materialNo
				}

				addReceiveDetail(params).then(res => {
					if (res.code == 200) {
						this.$modal.msgSuccess("操作成功");
						this.searchTrayInfo();
						this.materialItems = [{}];
						this.materialNo = '';
					}else{
						res.msg && this.$modal.confirmClose(res.msg)
					}
				})
			},
			clearTrayNo() {
				this.trayNo = '';
			},
			clearMaterialNo() {
				this.materialNo = '';
			},
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}

	.material-name {
		flex: 1;
		padding: 10rpx 0;
		word-break: break-all;
		display: flex;
		justify-content: end;
	}

	.s-input-box {
		display: flex;
		align-items: flex-start;
		padding: 20rpx;
		position: relative;

		.gray-text {
			min-width: 140rpx;
			margin-right: 20rpx;
		}

		.s-input {
			flex: 1;
			padding-right: 100rpx;
		}

		.s-input-icon {
			position: absolute;
			width: 40rpx;
			height: 40rpx;
			top: 50%;
			transform: translateY(-50%);
			z-index: 1;

			&.clear-icon {
				right: 80rpx;
			}

			&:last-child {
				right: 20rpx;
			}
		}
	}

	.qty-input {
		width: 200rpx;
		text-align: right;
		border: 1px solid #eee;
		border-radius: 4rpx;
		padding: 4rpx 10rpx;
	}
</style>
<style scoped>

</style>
